<template>
  <div class="tw-seamless xchart" ref="listContent" :style="{backgroundColor: bgColor}">
    <template v-show="data.length > 0 && !showHtml">
      <vue-seamless-scroll
        v-if="data.length>0"
        :data="list"
        :class-option="classOption"
        @ScrollEnd="toBreakList"
        class="seamless-warp m-seamless-list"
      >
        <div class="m-seamless-item" v-for="(item, index) in list" :key="index">
          <div class="xrank">{{titleText}}</div>
          <div class="xtitle" :title="item.subtitle">{{item.subtitle}}</div>
          <div class="xcontent">
            <i v-if="honorShow" class="xicon"></i>
          </div>
        </div>
      </vue-seamless-scroll>
    </template>
    <tw-lib-nodata v-show="list.length===0" />
  </div>
</template>

<script>
import scroll from 'vue-seamless-scroll'
window.Vue.use(scroll)

const props = require('./props')

export default {
  name: 'chart-seamless',

  props,

  data() {
    return {
      list: []
    }
  },

  computed: {
    classOption () {
      return {
        // direction: 0
        limitMoveNum: this.limitNum,
        step: this.step
      }
    },

    title () {
      if (this.datatitle) {
        return this.datatitle.split(',')
      } else {
        return []
      }
    },

    style () {
      return {
        overflow: this.overflow,
        linecolor: this.linecolor,
        itemWidth: this.itemWidth,
        itemHeight: this.itemHeight,
        titleFontSize: this.titleFontSize,
        titlecolor: this.titlecolor,
        subtitleFontSize: this.subtitleFontSize,
        subtitlecolor: this.subtitlecolor,
        contentFontSize: this.contentFontSize,
        contentcolor: this.contentcolor,
        scrollbarWidth: this.scrollbarWidth,
        scrollbarBgc: this.scrollbarBgc,
        thumbBgc: this.thumbBgc,
        limitNum: this.limitNum,
        listHeight: this.listHeight,
        step: this.step,
        noDataColor: this.noDataColor,
        noDataColorBd: this.noDataColorBd,
        noDataSize: this.noDataSize
      }
    }
  },

  methods: {
    initData () {
      if (this.dataIsFromPortal) {
        this.getData()
      } else {
        this.list = this.data
      }
    },

    getData () {
      let params = {
        condition: {
          siteId: this.$siteConfig.siteId,
          // siteId: 'cF5j8CgLY3X7',
          pageId: '',
          pageIdList: [],
          status: '1'
        },
        orderList: ['createTime desc', 'lastModifyTime asc'],
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
    },

    // 轮播一轮结束后回调事件
    toBreakList () {
      // this.getTableData()
    },

    setStyle () {
      let style = `
        ::root.tw-seamless.xchart {
          overflow-y:  ${this.overflow};
        }
        ::root.tw-seamless.xchart::-webkit-scrollbar {
          width: ${this.scrollbarWidth};
          background-color: ${this.scrollbarBgc};
        }
        ::root.tw-seamless.xchart::-webkit-scrollbar-thumb {
          background-color: ${this.thumbBgc};
        }
        ::root.tw-seamless.xchart .m-seamless-list {
          width:  ${this.listWidth};
          height: ${this.listHeight};
          margin: ${this.marginWidth} auto;
        }
        ::root.tw-seamless.xchart .m-seamless-header {
          width:  ${this.listWidth};
          color:  ${this.titlecolor};
          margin-bottom:  ${this.itemHeight};
        }

        ::root.tw-seamless.xchart .m-seamless-list .m-seamless-item {
          margin-bottom:  ${this.itemHeight};
        }

        ::root.tw-seamless.xchart .m-seamless-item .xbkg {
          padding: 0 6px 0 4px;
          width: fit-content;
          min-width: 20px;
          height: 20px;
          font-size: 16px;
          line-height: 22px;
          font-weight: 600;
          color: #fff;
          border-radius: 10px;
          font-style: italic;
          background-color: ${this.indexBgColor};
        }
        ::root.tw-seamless.xchart .m-seamless-item .xrank {
          line-height: 1.5;
          font-size: ${this.titleFontSize};
        }
        ::root.tw-seamless.xchart .m-seamless-item .xtitle {
          font-size: ${this.subtitleFontSize};
          color: ${this.subtitlecolor};
        }
        ::root.tw-seamless.xchart .m-seamless-item .xcontent {
          font-size: ${this.contentFontSize};
          color: ${this.contentcolor};
        }

      `
      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    }
  },

  mounted () {
    this.setStyle()
  },

  created () {
    this.initData()
    window.aa = this
  },

  beforeDestroy () {

  },

  watch: {
    dataIsFromPortal: {
      deep: true,
      handler () {
        this.initData()
      }
    },
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    },
    data: {
      deep: true,
      handler () {
        this.list = this.data
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>

<style lang="scss" scoped>
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
</style>
